<template>
    <view class="bg-[#F3F5F9]" style="min-height: 100vh;">
        <up-navbar title="分销中心" :safeAreaInsetTop="true" bgColor="#fff" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback" color="#000"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="gohome" color="#000"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="blurbg">
            <view class="flex py-[14rpx] px-[30rpx] bg-[#fff] absolute top-[30rpx] right-0" style="border-radius: 32rpx 0 0 32rpx;">
                <image src="../static/share.png" mode="scaleToFill" class="w-[32rpx] h-[32rpx] block mr-[16rpx]"/>
                <view class="text-[26rpx] text-[#649bf5] font-bold">分享</view>
            </view>
            <view class="mb-[24rpx] text-[26rpx] text-[#fff] font-bold">返利金额  比例:10%</view>
            <view class="text-[#fff] text-[40rpx] font-bold mb-[24rpx]">{{ thousands(Detail.totalRebate) }}</view>
            <up-line color="#fff"></up-line>
        </view>
        <view class="m-[30rpx] bg-[#fff] rounded-[8rpx]">
            <view class="flex justify-between items-center px-[24rpx] py-[28rpx]">
                <view class="text-[36rpx] text-[#1b2128] font-normal">邀请列表</view>
                <view class="List w-[384rpx] h-[48rpx]">
                    <view @click="checkItem(item.type)" :class="current == item.type ? 'active' : ''" class="ListItem" v-for="(item,index) in tabList" :key="index">
                        {{ item.name }}
                    </view>
                </view>
            </view>
            <up-line></up-line>
            <view class="px-[24rpx] py-[20rpx]" v-for="(item,index) in Detail.userInviteList" :key="index">
                <view class="py-[30rpx]  flex items-center">
                    <image :src="item.avatar" mode="scaleToFill" class="w-[100rpx] h-[100rpx] block rounded-[50%] mr-[24rpx]"/>
                    <view>
                        <view class="flex items-center">
                            <view class="text-[28rpx] text-[#1b2128] font-normal mr-[16rpx]">{{ item.nickName }}</view>
                            <view class="type">直推</view>
                        </view>
                        <view class="text-[24rpx] text-[#999] block">手机号:{{ item.createTime }}</view>
                        <view class="text-[24rpx] text-[#999] block">{{ item.createTime }}</view>
                    </view>
                </view>
                <view class="bg-[#F6F6F6] rounded-[8rpx]">
                    <view class="flex justify-between items-center py-[24rpx] px-[30rpx]">
                        <view class="text-[28rpx] text-[#1b2128] font-normal">返利金额：￥15,000.00</view>
                        <view>
                            <up-icon name="arrow-down" color="#000"></up-icon>
                        </view>
                    </view>
                    <up-line></up-line>
                    <view class="py-[24rpx] px-[30rpx]">
                        <view class="flex justify-between items-center mb-[24rpx]">
                            <view class="flex-1 text-[24rpx] text-[#1b2128] font-normal">支付单数：156单</view>
                            <view class="flex-1 text-[24rpx] text-[#1b2128] font-normal">退款单数：56单</view>
                        </view>
                        <view class="flex">
                            <view class="text-[24rpx] text-[#1b2128] font-normal mr-[8rpx]">交易金额：￥150,000.00</view>
                            <view class="text-[#68A6F4] text-[24rpx] font-normal">查看详细>></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'; 
import { computed, reactive , ref } from 'vue';
import { GetInviteRebateInfo } from '../../API/user';
const { goback , gohome } = useTab()
const { Detail , getDetail , tabList , current , checkItem} = useList()
function useTab(){
    const goback = () => {
        uni.navigateBack();
    }
    const gohome = () => {
        uni.switchTab({
            url: '/pages/index/index'
        })
    }
    return { goback , gohome }
}
function useList(){
    const tabList = ref([
        {
            name:'全部',
            type:0
        },{
            name:'只看直推',
            type:1
        },{
            name:'只看间推',
            type:2
        }
    ])
    const current = ref(0)
    const Detail = ref({})
    const pageObj = reactive({
        type:0,
        pageNum:1,
        pageSize:10
    })
    const getDetail = async () => {
        let { data } = await GetInviteRebateInfo(pageObj)
        Detail.value = data
    }
    const checkItem = (num) => {
        current.value = num
    }
    const thousands = computed(()=>(num)=>{
        return new Intl.NumberFormat('en-US').format(num);
    })
    return { Detail , getDetail , tabList , current , checkItem }
}
onLoad(async()=>{
    await getDetail()
})
</script>

<style scoped lang="scss">
.List{
    display: flex;
    overflow: hidden;
    align-items: center;
    border-radius: 8rpx;
    background-color: #F7F8FA;
    .ListItem{
        flex: 1;
        text-align: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        padding: 8rpx 16rpx;
    }
    .active{
        color:#5578F3;
        opacity: 0.5;
        background: linear-gradient( 90deg, rgba(85, 120, 243, 0.3) 0%, rgba(105, 167, 246, 0.3) 100%); 
    }   
}
.item{
    background-color: #fff;
    border-radius: 8rpx;
    margin: 30rpx;
    padding: 30rpx;
    position: relative;
}
.itembg{
    position: absolute;
}
.blurbg{
    margin: 30rpx;
    padding: 30rpx;
    position: relative;
    border-radius: 8rpx ;
    background: linear-gradient( 90deg, #5578F3 0%, #69A7F6 100%);
}
.type{
    font-weight: 400;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 50rpx;
    color: rgba(105, 167, 246, 1);
    background: linear-gradient( 90deg, #c2cdf7 0%, #dee7f2 100%);
}
</style>